<script setup lang="ts">
function handleClickLeft() {
  uni.navigateBack()
}
</script>

<template>
  <view class="h-full flex flex-col overflow-hidden">
    <wd-navbar
      title="推荐分类设置"
      left-text="返回"
      left-arrow
      :bordered="false"
      @click-left="handleClickLeft"
    />
    <wd-cell-group border>
      <view class="p-[10px] px-[15px]">
        <wd-text text="老板推荐" size="12px" />
      </view>
      <wd-cell title="热销推荐" center label="近30天销量由多到少，在“热销”区域展示">
        <wd-switch size="20px" />
      </wd-cell>
      <wd-cell title="为你推荐" center label="根据顾客的喜好，自动推荐菜品">
        <wd-switch size="20px" />
      </wd-cell>
      <wd-cell title="折扣分类" center label="自动展示所有的活动菜品，如无活动菜品，不展示">
        <wd-switch size="20px" />
      </wd-cell>
      <wd-cell title-width="80%" title="会员专区" center custom-class="no-leading">
        <wd-switch size="20px" />
        <template #label>
          <view class="mt-2">
            <wd-text
              text="最多展示10个会员优惠菜品（包括会员及会员可享的活动），如无活动菜品，不展示"
              size="12px"
            />
          </view>
        </template>
      </wd-cell>
      <wd-cell title="点过的菜" center label="展示1~6个顾客最近点过的菜">
        <wd-switch size="20px" />
      </wd-cell>
    </wd-cell-group>
  </view>
</template>

<style scoped lang="scss">
:deep(.no-leading.wd-cell) {
  line-height: 18px;
}
</style>
s
